<!--首页 参考网站：http://datav.jiaminghi.com/guide/scrollRankingBoard.html#%E6%95%B4%E9%A1%B5%E6%BB%9A%E5%8A%A8-->
<template>
    <div class="minW1060-auto minH600 bg-fff mag10 wbq" >

        <img src="@/assets/imgs/index.jpg" class="hqy">
    </div>
   <!-- <div class="minW1060-auto minH600 bg-fff">

        <div class="wel-con" :class="FullScreen?'map-FullScreen':'map'">
            &lt;!&ndash; 按钮 &ndash;&gt;
            <div class="Full" ref="full" @click="buttoncli">
                <i class="iconquanping" style="height:30px;"></i>
            </div>

            &lt;!&ndash; 头部 &ndash;&gt;
            <div class="head-title">
                <dv-decoration-8 style="width:25%;;height:60px;"/>

                <div class="title-con">
                    <div class="bigtitle">
                        <span>逸路安础基管理系统</span>
                    </div>
                    <dv-decoration-5 style="width:100%;height:60px;"/>
                </div>

                <dv-decoration-8 :reverse="true" style="width:25%;height:60px;"/>
            </div>

            &lt;!&ndash; 中间主体内容 &ndash;&gt;
            &lt;!&ndash;<div class="smcon" v-if="showSwipe">
                &lt;!&ndash; 整体边框&ndash;&gt;
                <dv-border-box-1>
                    <div class="border-con">
                        <div class="border-smcon">
                            &lt;!&ndash; 时间 &ndash;&gt;
                            <div class="time">{{NewTime}}</div>

                            &lt;!&ndash; 装饰 (左侧小点点)  &ndash;&gt;
                            <div class="Decoration">
                                <dv-decoration-3 style="width:250px;height:30px;"/>
                            </div>

                            &lt;!&ndash;左侧数据&ndash;&gt;
                            <div class="con-left">
                                <dv-border-box-13>
                                    <div class="left-bp">
                                        <div class="left-item">
                                            <div class="po-ab">昨日流量前五</div>
                                            <div class="po-n">
                                                <dv-capsule-chart :config="mileage5"
                                                                  style="width:100%;height:100%"/>
                                            </div>
                                        </div>

                                        <dv-decoration-10 style="width:100%;height:5px;"/>

                                        <div class="left-item pad-b">
                                            <div class="po-ab pad-b">周流量总数（M）</div>
                                            <div class="po-n">
                                                <dv-charts :option="weekOption" style="width:100%;height:100%"/>
                                            </div>
                                        </div>

                                        <dv-decoration-4 :reverse="true" style="width:100%;height:5px;"/>

                                        <div class="left-item">
                                            <div class="po-ab pad-b">月流量总数（M）</div>
                                            <div class="po-n">
                                                <dv-charts :option="mounthconfig" style="width:100%;height:100%"/>
                                            </div>
                                        </div>
                                    </div>
                                </dv-border-box-13>
                            </div>

                            <div class="con-cen">
                                <div class="cen-box">
                                    <div class="cen-top">
                                        <div class="cent-box">
                                            <dv-border-box-12>
                                                <div class="dv-smbox">
                                                    <div class="cent">
                                                        <dv-border-box-8>
                                                            <div class="title-box">

                                                                <div class="tbox-top">

                                                                    &lt;!&ndash; 装饰 &ndash;&gt;
                                                                    <div class="zs-box">
                                                                        <dv-decoration-1/>
                                                                    </div>

                                                                    <div class="amounts4">
                                                                        <div class="cen-t">人员总数:&nbsp;&nbsp;&nbsp;&nbsp;
                                                                            &lt;!&ndash;数字翻牌器&ndash;&gt;
                                                                            <dv-digital-flop
                                                                                    :config="totalconfig"
                                                                                    v-if="showCard"
                                                                                    class="switchNumber"
                                                                            />
                                                                        </div>

                                                                        <div class="cen-t">车辆总数:&nbsp;&nbsp;&nbsp;&nbsp;
                                                                            <dv-digital-flop
                                                                                    :config="totalpenconfig"
                                                                                    v-if="carCount"
                                                                                    class="switchNumber"
                                                                            />
                                                                        </div>

                                                                        <div class="cen-t">驾驶员总数:&nbsp;&nbsp;&nbsp;&nbsp;
                                                                            &lt;!&ndash;数字翻牌器&ndash;&gt;
                                                                            <dv-digital-flop
                                                                                    :config="totalconfig1"
                                                                                    v-if="totalconfig1If"
                                                                                    class="switchNumber aa"
                                                                            />
                                                                        </div>
                                                                        <div class="cen-t">线路总数:&nbsp;&nbsp;&nbsp;&nbsp;
                                                                            <dv-digital-flop
                                                                                    :config="totalconfig2"
                                                                                    v-if="totalconfig2If"
                                                                                    class="switchNumber"
                                                                            />
                                                                        </div>

                                                                    </div>

                                                                </div>

                                                                &lt;!&ndash;滚动站台数据&ndash;&gt;
                                                                <div class="tbox-bottom">
                                                                    <dv-scroll-ranking-board v-if="routeNameStation"
                                                                                             :config="Realtimeconfig"/>
                                                                </div>

                                                            </div>
                                                        </dv-border-box-8>
                                                    </div>

                                                    &lt;!&ndash; 多组雷达图&ndash;&gt;
                                                    <div class="cent">
                                                        <dv-charts :option="machineTpyeoption"/>
                                                    </div>

                                                </div>

                                            </dv-border-box-12>
                                        </div>
                                    </div>

                                    &lt;!&ndash;轮播表&ndash;&gt;
                                    <div class="cen-bottom">
                                        <dv-border-box-12>
                                            <div class="tab-box">
                                                <div class="tab-item">
                                                    <div class="po-tab">新增人员Top10</div>
                                                    <div class="po-tn">
                                                        <dv-scroll-board v-if="peopleInfo" :config="productConfig"
                                                                         style="width:100%;height:100%"/>
                                                    </div>
                                                </div>
                                                <dv-decoration-2 :reverse="true" style="width:5px;height:100%;"/>
                                                <div class="tab-item">
                                                    <div class="po-tab">新增车辆Top10</div>
                                                    <div class="po-tn">
                                                        <dv-scroll-board v-if="vehiclesInfo" :config="machineConfig"
                                                                         style="width:100%;height:100%"/>
                                                    </div>
                                                </div>
                                                <dv-decoration-2 :reverse="true" style="width:5px;height:100%;"/>
                                                <div class="tab-item">
                                                    <div class="po-tab">新增设备Top10</div>
                                                    <div class="po-tn">
                                                        <dv-scroll-board v-if="devicesInfo" :config="CityConfig"
                                                                         style="width:100%;height:100%"/>
                                                    </div>
                                                </div>
                                            </div>
                                        </dv-border-box-12>
                                    </div>
                                </div>
                            </div>

                            <div class="con-right">
                                <dv-border-box-13>
                                    <div class="left-bp">
                                        &lt;!&ndash; 折线图&ndash;&gt;
                                        <div class="left-item">
                                            <div class="po-ab">24小时车辆在线记录</div>
                                            <div class="po-n">
                                                <dv-charts :option="Dayoption" style="width:100%;height:100%"/>
                                            </div>
                                        </div>
                                        &lt;!&ndash; 旋转180度&ndash;&gt;
                                        <dv-decoration-10 class="rotate" style="width:100%;height:5px;"/>

                                        <div class="left-item pad-b">
                                            <div class="po-ab pad-b">设备类型占比</div>
                                            <div class="po-n">
                                                <dv-charts v-if="deviceTypeCount" :option="selloption"
                                                           style="width:100%;height:100%"/>
                                            </div>
                                        </div>

                                        <dv-decoration-4 class="rotate" :reverse="true" style="width:100%;height:5px;"/>

                                        <div class="left-item">

                                            &lt;!&ndash; 计量器&ndash;&gt;
                                            <div class="po-ab pad-b">车辆在线率</div>
                                            <div class="po-n po-bn">
                                                <div class="Coupons" v-if="carOnline">
                                                    <div class="Half">
                                                        <dv-charts :option="mapsoption"/>
                                                    </div>
                                                    <div class="Half">
                                                        <dv-charts :option="mapoption"/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </dv-border-box-13>
                            </div>
                        </div>
                    </div>
                </dv-border-box-1>
            </div>&ndash;&gt;
        </div>
    </div>-->

</template>
<script type="text/ecmascript-6">
    // 导入全屏显示方法
    import {fullscreenToggel} from "@/utils/util";
    import {
        getCarLineCount,
        getCountCar,
        getCountDriver,
        getCountPeople,
        getCountRoute,
        getDevicesInfo,
        getDeviceTypeCount,
        getPeopleInfo,
        getRouteNameStation,
        getVehiclesInfo
    } from '@/api';

    export default {
        name: "welcome",
        data() {
            return {
                showSwipe: true,
                FullScreen: false,
                showCard: false,
                carCount: false,
                routeNameStation: false,
                peopleInfo: false,
                vehiclesInfo: false,
                devicesInfo: false,
                deviceTypeCount: false,
                carOnline: false,
                NewTime: "",

                // 流量前五
                mileage5: {
                    data: [
                        {
                            name: "皖A12335",
                            value: 167
                        },
                        {
                            name: "皖A12345",
                            value: 67
                        },
                        {
                            name: "皖A12355",
                            value: 123
                        },
                        {
                            name: "皖A12365",
                            value: 55
                        },
                        {
                            name: "皖A12389",
                            value: 98
                        }
                    ],
                    unit: '（M）',
                    showValue: true
                },

                // 新增人员Top10
                productConfig: {
                    data: [],
                    index: true,
                    columnWidth: [50],
                    align: ["center"]
                },
                // 新增车辆Top10
                machineConfig: {
                    columnWidth: [50],
                    index: true,
                    data: []
                },
                // 新增设备Top10
                CityConfig: {
                    columnWidth: [50],
                    index: true,
                    data: []
                },

                // 24小时车辆在线记录
                Dayoption: {
                    grid: {
                        left: 40,
                        right: 10,
                        top: 20,
                        bottom: 30,
                        style: {
                            fill: "rgba(0, 0, 0, 0)"
                        }
                    },
                    xAxis: {
                        data: ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00", "24;00"],
                        axisLine: {
                            style: {
                                stroke: "#fff",
                                lineWidth: 1
                            }
                        },
                        axisLabel: {
                            style: {
                                fill: "#fff",
                                fontSize: 12,
                                rotate: 0
                            }
                        }
                    },
                    yAxis: {
                        data: "value",
                        axisLine: {
                            style: {
                                stroke: "#fff",
                                lineWidth: 1
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            style: {
                                fill: "#fff",
                                fontSize: 12,
                                rotate: 0
                            }
                        }
                    },
                    series: [
                        {
                            data: [100, 200, 190, 210, 350, 420, 398],
                            type: "line",
                            lineArea: {
                                show: true,
                                gradient: ["rgba(55, 162, 218, 0.6)", "rgba(55, 162, 218, 0)"]
                            }
                        }
                    ]
                },

                // 周流量总数
                weekOption: {
                    legend: {
                        top: 20,
                        iconHeight: 12,
                        data: ["本周", "上周"],
                        textStyle: {
                            fontSize: 12,
                            fill: "#fff"
                        }
                    },
                    grid: {
                        left: 40,
                        right: 10,
                        top: 20,
                        bottom: 30,
                        style: {
                            fill: "rgba(0, 0, 0, 0)"
                        }
                    },
                    xAxis: {
                        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
                        axisLine: {
                            style: {
                                stroke: "#fff",
                                lineWidth: 1
                            }
                        },
                        axisLabel: {
                            style: {
                                fill: "#fff",
                                fontSize: 12,
                                rotate: 0
                            }
                        }
                    },
                    yAxis: {
                        min: 0,
                        max: 5000,
                        splitNumber: 5,
                        name: '流量',
                        data: "value",
                        axisLine: {
                            style: {
                                stroke: "#fff",
                                lineWidth: 1
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            style: {
                                fill: "#fff",
                                fontSize: 12,
                                rotate: 0
                            }
                        }
                    },
                    series: [
                        {
                            name: "本周",
                            data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
                            type: "bar",
                            shapeType: "leftEchelon"
                        },
                        {
                            name: "上周",
                            data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
                            type: "bar",
                            shapeType: "rightEchelon"
                        }
                    ]
                },

                //设备类型占比
                selloption: {
                    grid: {
                        left: 0,
                        right: 0,
                        top: 0,
                        bottom: 10,
                        style: {
                            fill: "rgba(0, 0, 0, 0)"
                        }
                    },
                    series: [
                        {
                            type: "pie",
                            radius: "80%",
                            data: [{}],
                            insideLabel: {
                                show: true
                            },
                            outsideLabel: {
                                labelLineBendGap: 1,
                                labelLineEndLength: 20
                            }
                            //玫瑰饼状图
                            // roseType: true
                        }
                    ]
                },

                // 月份销售额
                mounthconfig: {
                    legend: {
                        top: 20,
                        iconHeight: 12,
                        textStyle: {
                            fontSize: 12,
                            fill: "#fff"
                        }
                    },
                    grid: {
                        left: 40,
                        right: 10,
                        top: 20,
                        bottom: 30,
                        style: {
                            fill: "rgba(0, 0, 0, 0)"
                        }
                    },
                    xAxis: {
                        name: "第一周",
                        data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
                        axisLine: {
                            style: {
                                stroke: "#fff",
                                lineWidth: 1
                            }
                        },
                        axisLabel: {
                            style: {
                                fill: "#fff",
                                fontSize: 12,
                                rotate: 0
                            }
                        }
                    },
                    yAxis: {
                        min: 0,
                        max: 5000,
                        splitNumber: 5,
                        name: "",
                        data: "value",
                        axisLine: {
                            style: {
                                stroke: "#fff",
                                lineWidth: 1
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            style: {
                                fill: "#fff",
                                fontSize: 12,
                                rotate: 0
                            }
                        }
                    },
                    series: [
                        {
                            data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
                            type: "bar",
                            backgroundBar: {
                                show: true
                            }
                        }
                    ]
                },

                // 优惠券领取
                mapsoption: {
                    title: {
                        text: "车辆在线",
                        offset: [0, -40],
                        style: {
                            fill: "#f9fbff",
                            fontSize: 14,
                            fontWeight: "bold",
                            textAlign: "center",
                            textBaseline: "bottom"
                        }
                    },
                    series: [
                        {
                            type: "gauge",
                            data: [
                                {
                                    name: "itemA",
                                    value: '',
                                    gradient: ["#e7bcf3", "#e690d1", "#fb7293"],
                                    localGradient: true
                                }
                            ],
                            center: ["50%", "55%"],
                            radius: "60%",
                            axisLabel: {
                                formatter: "{value}%",
                                style: {
                                    fill: "#fff"
                                }
                            },
                            details: {
                                show: true,
                                offset: [0, 40],
                                formatter: "在线{value}%",
                                style: {
                                    fontSize: 12,
                                    fontWeight: "bold",
                                    textAlign: "center",
                                    textBaseline: "middle"
                                }
                            },
                            axisTick: {
                                style: {
                                    stroke: "#fff"
                                }
                            },
                            animationCurve: "easeInOutBack"
                        }
                    ]
                },

                // 车辆离线
                mapoption: {
                    title: {
                        text: "车辆离线",
                        offset: [0, -40],
                        style: {
                            fill: "#f9fbff",
                            fontSize: 14,
                            fontWeight: "bold",
                            textAlign: "center",
                            textBaseline: "bottom"
                        }
                    },
                    series: [
                        {
                            type: "gauge",
                            data: [
                                {
                                    name: "itemA",
                                    value: '',
                                    gradient: ["#e7bcf3", "#e690d1", "#fb7293"],
                                    localGradient: true
                                }
                            ],
                            center: ["50%", "55%"],
                            radius: "60%",
                            axisLabel: {
                                formatter: "{value}%",
                                style: {
                                    fill: "#fff"
                                }
                            },
                            details: {
                                show: true,
                                offset: [0, 40],
                                formatter: "离线{value}%",
                                style: {
                                    fontSize: 12,
                                    fontWeight: "bold",
                                    textAlign: "center",
                                    textBaseline: "middle"
                                }
                            },
                            axisTick: {
                                style: {
                                    stroke: "#fff"
                                }
                            },
                            animationCurve: "easeInOutBack"
                        }
                    ]
                },

                //员工总数
                totalconfig: {
                    number: [],
                    //toFixed: 2,
                    content: "{nt}人",
                    textAlign: "left",
                    style: {
                        fontSize: 25
                    }
                },

                //车辆总数
                totalpenconfig: {
                    number: [],
                    content: "{nt}台",
                    textAlign: "left",
                    style: {
                        fontSize: 25
                    }
                },

                //驾驶员总数
                totalconfig1If: false,
                totalconfig1: {
                    number: [],
                    //toFixed: 2,
                    content: "{nt}人",
                    textAlign: "left",
                    style: {
                        fontSize: 25
                    }
                },

                //线路总数
                totalconfig2If: false,
                totalconfig2: {
                    number: [],
                    //toFixed: 2,
                    content: "{nt}条",
                    textAlign: "left",
                    style: {
                        fontSize: 25
                    }
                },


                machineTpyeoption: {
                    legend: {
                        bottom: 10,
                        iconHeight: 12,
                        data: ["今年车辆流量", "去年车辆流量"],
                        textStyle: {
                            fontSize: 12,
                            fill: "#fff"
                        }
                    },

                    radar: {
                        indicator: [
                            {name: "1月", max: 9000000},
                            {name: "2月", max: 9000000},
                            {name: "3月", max: 9000000},
                            {name: "4月", max: 9000000},
                            {name: "5月", max: 9000000},
                            {name: "6月", max: 9000000},
                            {name: "7月", max: 9000000},
                            {name: "8月", max: 9000000},
                            {name: "9月", max: 9000000},
                            {name: "10月", max: 9000000},
                            {name: "11月", max: 9000000},
                            {name: "12月", max: 9000000}
                        ],
                        axisLabel: {
                            style: {
                                fill: "#fff",
                                fontSize: 12
                            }
                        },
                        polygon: true,
                        axisLine: {
                            style: {
                                stroke: "rgba(251, 114, 147, .3)"
                            }
                        },
                        splitLine: {
                            style: {
                                stroke: "rgba(251, 114, 147, .5)",
                                fill: "rgba(251, 114, 147, .2)"
                            }
                        }
                    },
                    series: [
                        {
                            name: "今年车辆流量",
                            type: "radar",
                            data: [6110000, 6560000, 7780000, 5520000, 7660000, 8320000],
                            label: {
                                show: true
                            },
                            animationCurve: "easeOutBounce"
                        },
                        {
                            name: "去年车辆流量",
                            type: "radar",
                            data: [
                                6220000,
                                6450000,
                                5200000,
                                7300000,
                                6400000,
                                8000000,
                                7250000,
                                6580000,
                                5570000,
                                3570000,
                                6840000,
                                5120000
                            ],
                            label: {
                                show: true
                            },
                            animationCurve: "easeOutBounce"
                        }
                    ]
                },
                // 线路站点数量
                Realtimeconfig: {
                    rowNum: 5,
                    unit: "站",
                    data: []
                }
            };
        },

        // 创建完毕状态(里面是操作)
        created() {

            //加载员工总数
            this.getCountPeopleFn();
            // 时间定时器
            setInterval(this.getTime, 1000);

            // 请求数据
            this.showSwipe = false;
            this.$nextTick(function () {
                this.showSwipe = true;
            });
        },

        // 挂载结束状态(里面是操作)
        mounted() {
            //控制台 打印 banner
            console.log("%c逸路安出租车基础数据", " text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em")

        },

        // 里面的函数只有调用才会执行
        methods: {
            getCountPeopleFn() {
                //查询人员总数
                /*getCountPeople({}).then(res => {
                    if (res.code == 200) {
                        this.showCard = true;
                        this.totalconfig.number = res.data;
                        console.log(1111)
                    }
                }),*/
                    //查询线路名称和站点名称
                   /* getRouteNameStation({}).then(res => {
                        if (res.code == 200) {
                            this.routeNameStation = true;
                            this.Realtimeconfig.data = res.data
                        }
                    }),*/
                    //查询车辆总数
                   /* getCountCar({}).then(res => {
                        if (res.code == 200) {
                            this.carCount = true;
                            this.totalpenconfig.number = res.data
                        }
                    }),*/
                    //查询员工信息
                   /* getPeopleInfo({}).then(res => {
                        if (res.code == 200) {
                            this.peopleInfo = true;
                            this.productConfig.data = res.data
                        }
                    }),*/
                    //查询车辆信息
                    /*getVehiclesInfo({}).then(res => {
                        if (res.code == 200) {
                            this.vehiclesInfo = true;
                            this.machineConfig.data = res.data
                        }
                    }),*/
                    //查询设备信息
                   /* getDevicesInfo({}).then(res => {
                        if (res.code == 200) {
                            this.devicesInfo = true;
                            this.CityConfig.data = res.data
                        }
                    }),
*/
                    //查询线路数量
                   /* getCountRoute({}).then(res => {
                        if (res.code == 200) {
                            this.totalconfig1If = true;
                            console.log(res.data)
                            this.totalconfig1.number[0] = res.data
                        }
                    }),
*/
                    //查询驾驶员数量
                    /*getCountDriver({}).then(res => {
                        if (res.code == 200) {
                            console.log(res.data)
                            this.totalconfig2If = true;
                            this.totalconfig2.number[0] = res.data
                        }
                    }),*/

                    //设备类型比
                    /*getDeviceTypeCount({}).then(res => {
                        if (res.code == 200) {
                            this.deviceTypeCount = true;
                            this.selloption.series[0].data = res.data.data
                        }
                    }),*/

                    /*getCarLineCount({}).then(res => {
                        if (res.code == 200) {
                            this.carOnline = true;
                            this.mapsoption.series[0].data[0].value = res.data.countOnlineCar;
                            this.mapoption.series[0].data[0].value = res.data.countOfflineCar
                        }
                    })*/
            },
            buttoncli() {
                // 是否全屏
                this.FullScreen = !this.FullScreen;
                this.FullScreen
                    ? (this.Realtimeconfig.rowNum = 7)
                    : (this.Realtimeconfig.rowNum = 5);
                fullscreenToggel();
            },
            // 请求数据
            getData() {
            },
            // 当前时间
            getTime() {
                let now = new Date();
                let year = now.getYear();
                year = now.getFullYear();
                let month = now.getMonth() + 1;
                month = month < 10 ? "0" + month : month;
                let days = now.getDate();
                days = days < 10 ? "0" + days : days;
                let hour = now.getHours();
                hour = hour < 10 ? "0" + hour : hour;
                let minutes = now.getMinutes();
                minutes = minutes < 10 ? "0" + minutes : minutes;
                let seconds = now.getSeconds();
                seconds = seconds < 10 ? "0" + seconds : seconds;
                this.NewTime =
                    year +
                    "-" +
                    month +
                    "-" +
                    days +
                    "  " +
                    hour +
                    ":" +
                    minutes +
                    ":" +
                    seconds;
            }
        }
    };
</script>
<style>
    .wel-con {
        width: 100%;
        height: 92.1vh;
        overflow: auto;
        box-sizing: border-box;
        background-image: url("../../../assets/imgs/bg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
    }

    .Full {
        width: 30px;
        height: 30px;
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1000;
        box-sizing: border-box;
        padding: 5px;
        border-radius: 5px;
        /*background-color: #cccccc;*/
    }

    .Full:hover {
        background-color: #fff;
    }

    .Full > img {
        width: 100%;
        height: 100%;
    }

    .map {
        position: relative;
        width: 100%;
        min-height: 843px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .map-FullScreen {
        z-index: 9000;
        object-fit: contain;
        position: fixed !important;
        top: 0px !important;
        right: 0px !important;
        bottom: 0px !important;
        left: 0px !important;
        box-sizing: border-box !important;
        min-width: 0px !important;
        max-width: none !important;
        min-height: 0px !important;
        max-height: none !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        margin: 0px !important;
    }

    .head-title {
        width: 100%;
        height: 100px;
        text-align: center;
        display: flex;
        justify-content: space-between;
    }

    .title-con {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .bigtitle {
        display: inline-block;
        font-size: 30px;
        color: #f9fbff;
        position: relative;
        height: 30px;
    }

    .bigtitle > span {
        width: 100%;
        text-align: center;
        position: absolute;
        left: 0px;
        top: 10px;
    }

    .smcon {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        padding-top: 100px;
    }

    .border-con {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 20px;
    }

    .border-smcon {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        position: relative;
    }

    .con-left {
        width: 25%;
        height: 100%;
        box-sizing: border-box;
        position: absolute;
        left: 0px;
        top: 0px;
    }

    .con-cen {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 0px 25%;
    }

    .con-right {
        width: 25%;
        height: 100%;
        box-sizing: border-box;
        position: absolute;
        right: 0px;
        top: 0px;
    }

    .left-bp {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 20px;
    }


    .cen-box {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        position: relative;
    }

    .cen-top {
        width: 100%;
        height: calc(100% - 40%);
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
    }

    .cent-box {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 5px;
    }

    .cen-bottom {
        width: 100%;
        height: 40%;
        box-sizing: border-box;
    }

    .tab-box {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 20px;
        display: flex;
        justify-content: center;
    }

    .left-item {
        width: 100%;
        height: 33%;
        box-sizing: border-box;
        position: relative;
    }

    .po-ab {
        position: absolute;
        top: 0px;
        left: 0px;
        color: #f9fbff;
    }

    .po-n {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding-top: 20px;
    }

    .tab-item {
        width: 33%;
        height: 100%;
        box-sizing: border-box;
        position: relative;
    }

    .rotate {
        transform: rotate(180deg);
    }

    .po-tab {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        text-align: center;
        color: #f9fbff;
    }

    .po-tn {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding-top: 30px;
    }

    .pad-b {
        padding-top: 8px;
    }

    .po-bn {
        padding-top: 38px;
    }

    .cen-t {
        margin-left: 5%;
        display: inline-block;
        width: 40%;
        height: 35%;
        vertical-align: middle;
        color: white;
    }

    .amounts4 {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-flow: row wrap;
        justify-content: space-between;
        /*align-content: space-between;*/
    }

    .switchNumber {
        display: inline-block;
        width: 60px;
        height: 100%;
        vertical-align: middle;
    }


    .cent {
        width: 50%;
        box-sizing: border-box;
        text-align: center;
    }

    .dv-smbox {
        width: 100%;
        height: 100%;
        /* padding: 10px; */
        box-sizing: border-box;
        display: flex;
        justify-items: space-between;
    }

    .title-box {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 10px;
    }

    .time {
        position: absolute;
        top: -35px;
        right: 5%;
        font-size: 25px;
        color: #f9fbff;
    }

    .Decoration {
        position: absolute;
        top: -35px;
        left: 5%;
    }

    .tbox-top {
        width: 100%;
        height: 130px;
        box-sizing: border-box;
        position: relative;
    }

    .tbox-bottom {
        width: 100%;
        height: calc(100% - 130px);
        box-sizing: border-box;
    }

    .zs-box {
        /*position: absolute;*/
        top: 0px;
        /*right: 0px;*/
        width: 80%;
        height: 30px;
    }

    .Coupons {
        widows: 100%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
    }

    .Half {
        width: 50%;
        height: 100%;
    }
    .wbq{
        position: relative;
    }
    .hqy{

        position: absolute;
        left: 40%;
        top:20%;
        /*margin: 0 auto;*/
    }

</style>
